<template>
  <div class="app-container">
    <el-row class="topHeaders">
      <el-form
        ref="queryForm"
        :model="queryParams"
        :inline="true"
        label-width="68px"
      >
        <el-col :span="23" class="formBoxLeft">
          <el-form-item class="datetimerange">
            <el-button type="primary" size="medium" @click="prev"
              >&lt;</el-button
            >
            <el-date-picker
              v-model="dateTimeValue"
              type="date"
              :clearable="false"
              placeholder="选择日期"
              @change="onChange"
            >
            </el-date-picker>
            <el-button type="primary" size="medium" @click="next"
              >&gt;</el-button
            >
          </el-form-item>
          <el-form-item class="btnGroup">
            <el-button
              v-for="(item, index) in todayBtnList"
              :key="index"
              type="primary"
              size="medium"
              class="btn"
              :class="{ isActive: isNormal === index }"
              plain
              @click="handleTodayReturnChange(index)"
            >
              {{ item.name }}
            </el-button>
            <el-button
              v-hasPermi="['erp:visit:export']"
              class="pan-btn yellow-btn"
              type="warning"
              icon="el-icon-download"
              size="medium"
              @click="handleExport"
              >导出</el-button
            >
          </el-form-item>
        </el-col>
        <el-col :span="1" class="formBoxRight">
          <show-or-hide
            :params="queryParams"
            :dict="{
              marketStatusOptions,
              marketMakeProject,
              clinicOptions,
              projectOptions,
              callBackStateOptions,
              reachStatusOptions,
              marketChannelList,
              marketPostList,
              visitPerson: [1],
              filingPerson: [1],
            }"
            @query="handleQuerys"
            @show="showHide"
            @reset="resetRouters"
          />
        </el-col>
      </el-form>
    </el-row>
    <el-table
      v-loading="loading"
      stripe
      border
      :data="list"
      :height="clientHeight"
      :max-height="clientHeight"
      @row-click="handleDetails"
      @cell-dblclick="doubleHandle"
    >
      <el-table-column
        fixed="left"
        width="70"
        header-align="center"
        align="center"
      >
        <template slot-scope="scope">
          <el-radio v-model="radio" class="radio" :label="scope.$index"
            >&nbsp;</el-radio
          >
        </template>
      </el-table-column>
      <columns-filter-view label="客户头像">
        <el-table-column
          label="头像"
          align="center"
          prop="yiyaMarketReservation.imageUrl"
          :min-width="'头像'.length * 40"
        >
          <template slot-scope="scope">
            <avatar-image :patient="scope.row.yiyaMarketReservation" />
          </template>
        </el-table-column>
      </columns-filter-view>
      <columns-filter-view label="客户姓名">
        <el-table-column
          label="客户姓名"
          align="center"
          prop="yiyaMarketReservation.name"
          :min-width="'姓名'.length * 50"
        >
          <template slot-scope="scope">
            <div style="cursor: pointer">
              {{ scope.row.yiyaMarketReservation.name }}
            </div>
          </template>
        </el-table-column>
      </columns-filter-view>
      <columns-filter-view>
        <el-table-column
          label="手机号"
          align="center"
          :min-width="'手机号码'.length * 50"
        >
          <template slot-scope="scope">
            <hover-phone :items="scope.row.yiyaMarketReservation" />
          </template>
        </el-table-column>
      </columns-filter-view>
      <columns-filter-view label="预约门诊"
        ><el-table-column
          label="预约门诊"
          align="center"
          prop="yiyaMarketReservation.reservationClinic"
          :formatter="filterVisitClinic"
          :min-width="'预约门诊'.length * 30"
      /></columns-filter-view>
      <!-- <columns-filter-view label="到店状态"
        ><el-table-column
          label="到店状态"
          align="center"
          prop="yiyaMarketReservation.status"
          :formatter="
            (_, __, value) => formatterDict(value, 'marketStatusOptions')
          "
      /></columns-filter-view> -->
      <columns-filter-view label="回访状态"
        ><el-table-column
          label="回访状态"
          align="center"
          prop="yiyaMarketVisit.followStatus"
          :min-width="'到店状态'.length * 30"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.yiyaMarketVisit.followStatus == '跟进'"
              style="color: #32a1c8"
              >{{ scope.row.yiyaMarketVisit.followStatus }}</span
            >
            <span v-else>{{ scope.row.yiyaMarketVisit.followStatus }}</span>
          </template>
        </el-table-column>
      </columns-filter-view>
      <columns-filter-view label="预约时间">
        <el-table-column
          label="预约时间"
          align="center"
          prop="yiyaMarketVisit.nextVisitTime"
          width="180"
        />
      </columns-filter-view>
      <columns-filter-view label="跟进人">
        <el-table-column
          label="跟进人"
          align="center"
          prop="yiyaMarketVisit.followPerson"
        />
      </columns-filter-view>
      <columns-filter-view label="建档人"
        ><el-table-column
          label="建档人"
          align="center"
          prop="yiyaMarketReservation.filingPerson"
      /></columns-filter-view>
      <columns-filter-view label="一级渠道">
        <el-table-column
          label="一级渠道"
          align="center"
          prop="yiyaMarketReservation.channelFirst"
          :min-width="'一级渠道'.length * 30"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.yiyaMarketReservation.channelFirst == '-1'
                ? '直接上门'
                : scope.row.yiyaMarketReservation.channelFirst
            }}</span>
          </template>
        </el-table-column>
      </columns-filter-view>
      <columns-filter-view label="二级渠道"
        ><el-table-column
          label="二级渠道"
          align="center"
          prop="yiyaMarketReservation.channelSecond"
          :min-width="'一级渠道'.length * 30"
      /></columns-filter-view>
      <columns-filter-view label="三级渠道">
        <el-table-column
          label="三级渠道"
          align="center"
          prop="yiyaMarketReservation.channelThird"
          :min-width="'一级渠道'.length * 30"
      /></columns-filter-view>
      <columns-filter-view label="性别">
        <el-table-column
          label="性别"
          align="center"
          sortable
          column-key="sex"
          prop="yiyaMarketReservation.sex"
          :formatter="
            (row) => formatterDict(row.yiyaMarketReservation.sex, 'sexOptions')
          "
      /></columns-filter-view>
      <columns-filter-view label="年龄">
        <el-table-column
          label="年龄"
          align="center"
          prop="yiyaMarketReservation.age"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.yiyaMarketReservation.age == 0
                ? ''
                : scope.row.yiyaMarketReservation.age
            }}</span>
          </template>
        </el-table-column>
      </columns-filter-view>
      <columns-filter-view label="回访内容">
        <el-table-column
          label="回访内容"
          align="center"
          prop="yiyaMarketReservation.reach"
          :min-width="'到店状态'.length * 50"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.yiyaMarketVisit.result }}</span>
          </template>
        </el-table-column>
      </columns-filter-view>
      <columns-filter-view label="建档时间">
        <el-table-column
          label="建档时间"
          align="center"
          prop="yiyaMarketReservation.filingTime"
          width="180"
        />
      </columns-filter-view>

      <template slot="empty">
        <empty></empty>
      </template>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      :page-sizes="pageSizes"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { exportVisit, visitListRecord } from '@/api/erp/visit'
import showOrHide from '@/components/yiya/showOrHide'
import market from '@/mixins/market'
import { ColumnsFilterView } from '@/components/yiya/TableColumnsFilter'
import moment from 'moment'
import hoverPhone from '@/components/yiya/hoverPhone'
import { mapState } from 'vuex'
import avatarImage from '@/components/yiya/avatarImage'
import Empty from '@/components/yiya/Empty'

export default {
  name: 'ReturnRecord',
  components: {
    showOrHide,
    ColumnsFilterView,
    hoverPhone,
    avatarImage,
    Empty,
  },
  mixins: [market],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 市场回访表格数据
      list: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        orderByColumn: 'nextVisitTime',
        isAsc: 'desc',
      },
      dateTimeValue: '',
      isNormal: 0,
    }
  },
  computed: {
    ...mapState({
      marketParams: (state) => state.pathQurey['/market/todayReturn'] || {},
    }),
  },
  watch: {
    marketParams: {
      handler(newVal) {
        if (Object.keys(newVal).length > 2) {
          this.dateTimeValue = newVal.nextVisitTime
          this.queryParams = newVal
        }
      },
      immediate: true,
    },
  },
  methods: {
    handleTodayReturnChange(index) {
      this.isNormal = index
      this.getList()
    },
    async resetRouter() {
      this.$store.dispatch('pathQurey/setMarketQuery', {
        path: this.$route.path,
        data: this.queryParams,
      })
      await this.getList()
    },
    resetRouters(e) {
      if (e) {
        const params = {
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize,
          nextVisitTime: this.queryParams.nextVisitTime,
          orderByColumn: this.queryParams.orderByColumn,
          isAsc: this.queryParams.isAsc,
        }
        this.queryParams = params
        this.$store.dispatch('pathQurey/setMarketQuery', {
          path: this.$route.path,
          data: this.queryParams,
        })
      }
    },
    async handleQuerys(e) {
      // e.nextVisitTime = this.queryParams.nextVisitTime
      // this.getList(e)
      if (e == undefined || e == null) {
        this.resetRouter()
      } else {
        this.queryParams = Object.assign(e, this.queryParams)
        await this.resetRouter()
      }
    },

    async onChange(value) {
      this.queryParams.nextVisitTime = this.parseTime(value, '{y}-{m}-{d}')
      await this.resetRouter()
    },
    async prev() {
      this.dateTimeValue = moment(this.dateTimeValue).subtract(1, 'days')
      this.queryParams.nextVisitTime = this.parseTime(
        this.dateTimeValue._d,
        '{y}-{m}-{d}'
      )
      await this.resetRouter()
    },
    async next() {
      this.dateTimeValue = moment(this.dateTimeValue).add(1, 'days')
      this.queryParams.nextVisitTime = this.parseTime(
        this.dateTimeValue._d,
        '{y}-{m}-{d}'
      )
      await this.resetRouter()
    },
    async changeTime(e) {
      this.dateTimeValue = this.parseTime(e[0].$d, '{y}-{m}-{d}')
      await this.changeTimeDate(e[0].$d)
    },
    async changeTimeDate(e) {
      if (Object.keys(this.marketParams).length > 2) {
        this.queryParams = this.marketParams
      } else {
        this.queryParams.nextVisitTime = this.parseTime(e, '{y}-{m}-{d}')
      }
      await this.resetRouter()
    },
    /** 查询市场回访列表 */
    async getList() {
      this.loading = true
      await visitListRecord(this.queryParams).then((response) => {
        if (this.isNormal) {
          this.list = response.rows.filter(
            (item) =>
              item.yiyaMarketVisit.nextVisitTime !=
              this.parseTime(item.yiyaMarketVisit.visitTime, '{y}-{m}-{d}')
          )
          this.total = this.list.length
        } else {
          //已回访
          this.list = response.rows.filter(
            (item) =>
              item.yiyaMarketVisit.nextVisitTime ==
              this.parseTime(item.yiyaMarketVisit.visitTime, '{y}-{m}-{d}')
          )
          this.total = this.list.length
        }
        this.loading = false
      })
    },
    /** 导出按钮操作 */
    handleExports() {
      this.handleExport(exportVisit)
    },
  },
}
</script>

<style scoped>
@import '../static/style.scss';
</style>
